<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">二级分类</div>
    </div>
    <div class="input_modal">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="addSort"
      >新增</el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        @click="back"
      >返回</el-button>
    </div>
    <div class="input_modal">
      <!-- <div class="input-item">
        <span>分类ID：</span>
        <el-input
          v-model="parentId"
          placeholder="请输入"
          class="proName"
        />
      </div> -->
      <div class="input-item">
        <span>分类名称：</span>
        <el-input
          v-model="categoryNameLike"
          placeholder="请输入"
          class="proName"
        />
      </div>
      <div class="input-item">
        <span>分类状态：</span>
        <el-select
          v-model='isEnable'
          placeholder='-请选择-'
          style="height: 30px;  line-height: 30px;width:200px;"
        >
          <el-option
            v-for="item in bannerArr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
        </el-select>
      </div>
      <el-button
        type="primary"
        size="mini"
        @click="getList()"
      >查询</el-button>
    </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
      >
        <el-table-column
          prop="parentCategoryName"
          label="一级分类"
        ></el-table-column>
        <el-table-column
          prop="categoryName"
          label="二级分类"
        ></el-table-column>
        <el-table-column
          prop="plateCode"
          label="状态"
        >
          <template slot-scope="scope">
            {{scope.row.isEnable?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width='240'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="el-icon-edit"
              @click="editSort(scope.row)"
            >编辑</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="linkToTop(scope.row.id,scope.row.isEnable)"
             >{{scope.row.isEnable == 'n'?'启用':'禁用'}}</el-button>
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              @click="linkToDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="新增/编辑分类"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form
        :model="information"
        :rules="rules"
        ref="information"
        label-width="180px"
        class=""
       >
        <el-form-item
          label="状态："
          prop="isEnable"
        >
          <el-radio
            v-model="information.isEnable"
            label="y"
          >启用</el-radio>
          <el-radio
            v-model="information.isEnable"
            label="n"
          >禁用</el-radio>
        </el-form-item>
        <el-form-item
          label="一级分类:"
          prop="title"
         >
          <el-select
            filterable
            v-model='information.parentId'
            placeholder='-请选择-'
          >
            <el-option
              v-for="item in sortArr"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级分类名称:"
          prop="categoryName"
        >
          <el-input
            style="width:220px"
            v-model="information.categoryName "
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
            type="primary"
            @click="submitForm('information')"
          >确定</el-button>
          <el-button
            type="primary"
            @click="cancelBtn"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      information:{
        "categoryName": "",
        "parentId": "",
        id:'',
        "isEnable": "",
        "levelCount":2
      },
      rule:{},
      sortArr:[],
      bannerArr: [
        {
          name: "全部",
          id: ""
        },
        {
          name: "启用",
          id: "y"
        },
        {
          name: "禁用",
          id: "n"
        }
      ],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      parentId: null,
      isEnable: null,
      categoryNameLike: "",
      dialogVisible:false,
      rules:{

      }
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getSortArr()
    this.getList();
  },
  methods: {
    getSortArr(){
        let url = CONSTANT.URL.LIST.SORTBYPAGE;
        let data = {
            pageIndex: 1,
            pageSize: 10000,
            levelCount:1
        };
        common.post(url, data, res => {
            this.sortArr = res.data.bussData;
        });
    },
    back(){
        this.$router.replace('sortList')
    },
    cancelBtn(){
        this.dialogVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = CONSTANT.URL.LIST.SORTEDIT;
          common.post(url, this.information, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList()
              this.dialogVisible = false
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addSort(){
      this.information = {
        "categoryName": "",
        "parentId": "",
        id:'',
        "isEnable": "",
        "levelCount":2
      }
      this.dialogVisible = true
    },
    editSort(obj){
      this.information = {
        "categoryName": obj.categoryName,
        "parentId": obj.parentId,
        "isEnable": obj.isEnable,
        "levelCount":2,
        id:obj.id
      }
      this.dialogVisible = true
    },
    linkToTop(id,state){
        this.$confirm(`确定${state == 'n'?'启用':'禁用'}该分类?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let  url = CONSTANT.URL.LIST.SORTENABLE;
         let type = state=='y'?'n':'y';
          common.get(url,'/'+id+'/'+type,(res)=>{
            if(res.code == 200){
              this.$message({
                type:'success',
                message:'操作成功!'
              });
              this.getList();
            }else{
              this.$message({
                type:'warning',
                message:res.data.errMsg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
    linkToDel(id) {
      this.$confirm(`确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.SORTDELETE;
          common.del(url, id, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.pageIndex = 1;
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        isEnable: this.isEnable,
        categoryNameLike: this.categoryNameLike,
        levelCount:2
      };
      this.loading = true;
      common.post(url, data, res => {
        this.loading = false;
        this.tableData = res.data.bussData;
        this.pageCount = res.data.count;
      });
    },
    returuBanner(val) {
      let str;
      this.bannerArr.map(item => {
        if (val == item.id) {
          str = item.name;
        }
      });
      return str;
    },
    handleClickTab(tab, e) {},
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    },
    linkTo() {
      this.$router.push("sortEdit");
    }
  },
  filters: {
    formatStatus(value) {
      var list = [];
      list["y"] = "上架";
      list["n"] = "下架";
      if (value) {
        return list[value];
      } else {
        return "--";
      }
    }
  }
};
</script>
